<template>
	<el-row>
		<el-col :span="4">
			<h1 id="logo" @click="goHome">SHOU<span>SI</span></h1>
		</el-col>
		<el-col :span="6"></el-col>
		<el-col :span="8">
			<el-input prefix-icon="el-icon-search" v-model="keyWord" @change="searchByKeyWord"></el-input>
		</el-col>
		<el-col :span="6">
			<div class="link-list">
				<el-link @click="goHome" :underline="false">
					随机图片
				</el-link>
				<el-link @click="develping" :underline="false">
					shousi站点1
				</el-link>
				<el-link @click="develping" :underline="false">
					shousi站点2
				</el-link>
			</div>
			<i id="control-icon" class="el-icon-s-fold" @click="changeMenuStatus"></i>
		</el-col>
	</el-row>
</template>

<script>
export default{
	data(){
		return {
			menuStatus: false,
			keyWord: ""
		}
	},
	watch:{
		// 跳转页面刷新
		'$route' (to, from) {
		  this.$router.go(0);
		},
		menuStatus(val, oldVal){
			let linkList = document.querySelector('.link-list');
			let contralIcon = document.querySelector('#control-icon');
			let clientWidth = document.body.clientWidth;
			if(oldVal){
				// 设置链接列表可见
				if(clientWidth>480){
					linkList.style.display = 'flex';
				}else{
					linkList.style.display = 'grid';
				}
				// 更改图标
				contralIcon.classList.remove('el-icon-s-fold');
				contralIcon.classList.add('el-icon-s-unfold');
			}else{
				// 设置链接列表不可见
				if(clientWidth>480){
					linkList.style.display = 'grid';
				}else{
					linkList.style.display = 'none';
				}
				// 更改图标
				contralIcon.classList.remove('el-icon-s-unfold');
				contralIcon.classList.add('el-icon-s-fold');
			}
		}
	},
	methods:{
		changeMenuStatus(){
			this.menuStatus = !this.menuStatus;
		},
		goHome(){
			this.$router.push({path: '/random'});
		},
		// 按颜色搜索
		searchByKeyWord(){
			this.$router.push({path: '/result/'+encodeURI(encodeURI(this.keyWord)), params:{keyWord: this.keyWord}});
		},
		// 开发中~~弹窗
		develping(){
			 this.$message('开发中(๑•̀ㅂ•́)و✧~~');
		}
	}
}
</script>

<style>
	/* logo动画 */
	@keyframes logo-animation{
		0%{
			letter-spacing: -0.6rem;
			opacity: 0;
		}
		50%{
			opacity: 0.6;
		}
		100%{
			opacity: 1;
		}
	}
	#logo{
		font-family: "book antiqua";
		font-size: 2rem;
		cursor:pointer;
		animation: logo-animation 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 0s;
	}
	#logo > span{
		font-family:'Times New Roman', Times, serif;
		color: #ffffff;
	}
	.el-row{
		width: 100%;
		height: 80%;
		/* flex布局 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.el-input{
		width: 50%;
	}
	.link-list{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.el-link{
		color: #FFFFFF !important;
	}
	#control-icon{
		display: none;
	}
	/* 媒体查询 */
	@media screen and (max-width: 480px){
		.el-input{
			width: 100%;
		}
		.link-list{
			width: 50%;
			background-color: #F0F8FF;
			opacity: 1;
			/* 固定到右上角 */
			position: fixed;
			right: 0;
			top: 8vh;
			/* 布局 */
			display: grid;
			grid-template-columns: 1fr;
		}
		.link-list > .el-link{
			height: 5vh;
			color: #42B983 !important;
		}
		#control-icon{
			color: white;
			display: inline-block;
			font-size: x-large;
		}
	}
</style>
